import { onMounted, ref } from "vue";
import {
  type ButtonsCallBackParams,
  type PageInfo,
  type PlusColumn,
  useTable
} from "plus-pro-components";
import { ElMessage } from "element-plus";
import { api } from "@/api/orderInfo";

export function useOrderInfo() {
  const isAdd = ref(false);

  // ========= search form =========

  // 查询表单对象
  const searchFormData = ref({
    orderNo: "",
    price: "",
    remark: "",
    pageIndex: 1,
    pageSize: 10
  });

  // 查询表单字段定义
  const searchFormColumns: PlusColumn[] = [
    {
      label: "订单号",
      prop: "orderNo"
    },
    {
      label: "订单金额",
      prop: "price"
    },
    {
      label: "备注",
      prop: "remark"
    }
  ];

  // ========= table =========

  // 表格对象
  const {
    tableData,
    total,
    pageInfo,
    buttons: actionButtons
  } = useTable<any[]>();
  // 默认每页条数,默认10
  pageInfo.value.pageSize = 10;

  // 表格字段定义
  const tableColumns: PlusColumn[] = [
    {
      label: "订单号",
      prop: "orderNo"
    },
    {
      label: "订单金额",
      prop: "price"
    },
    {
      label: "备注",
      prop: "remark"
    },
    {
      width: 120,
      label: "添加时间",
      prop: "addTime"
    },
    {
      width: 120,
      label: "修改时间",
      prop: "updateTime"
    },
    {
      label: "创建人id",
      width: 120,
      prop: "addBy.showName"
    },
    {
      label: "最后更新人id",
      width: 120,
      prop: "updateBy.showName"
    }
  ];
  // 表格按钮定义
  actionButtons.value = [
    {
      // 修改
      text: "修改",
      code: "edit",
      props: {
        type: "primary"
      },
      onClick(params: ButtonsCallBackParams) {
        isAdd.value = false;
        editFormData.value = Object.assign({}, params.row);
        dlgTitle.value = "修改";
        dlgShow.value = true;
      }
    },
    {
      // 删除
      text: "删除",
      code: "delete",
      props: {
        type: "danger"
      },
      confirm: {
        options: { draggable: false }
      },
      onConfirm(params: ButtonsCallBackParams) {
        api.del(params.row).then(() => {
          ElMessage.success("删除成功");
          search();
        });
      }
    }
  ];

  // ========= dialog form =========

  // 弹窗显示
  const dlgShow = ref(false);
  const dlgTitle = ref("");
  // 表单值
  const editFormDataGen = () => {
    return {
      orderNo: "",
      price: "",
      remark: ""
    };
  };
  const editFormData = ref<any>(editFormDataGen());
  const editFormRules = {
    orderNo: [{ required: true, message: "请输入订单号" }],
    price: [{ required: true, message: "请输入订单金额" }],
    remark: [{ required: true, message: "请输入备注" }]
  };

  // 表单内容
  const editFormColumns: PlusColumn[] = [
    {
      label: "订单号",
      prop: "orderNo",
      valueType: "input"
    },
    {
      label: "订单金额",
      prop: "price",
      valueType: "input"
    },
    {
      label: "备注",
      prop: "remark",
      valueType: "input"
    }
  ];

  // ========= event =========

  // 添加按钮事件
  const handleAdd = () => {
    isAdd.value = true;
    editFormData.value = editFormDataGen();
    dlgTitle.value = "新增";
    dlgShow.value = true;
  };

  // 保存按钮事件,校验成功后触发
  const handleSave = () => {
    const postData = editFormData.value;
    const pms = isAdd.value ? api.add(postData) : api.update(postData);
    pms.then(() => {
      ElMessage.success("保存成功");
      dlgShow.value = false;
      search();
    });
  };

  // 点击查询按钮
  const handleSearch = () => {
    pageInfo.value.page = 1;
    search();
  };

  // 分页事件
  const handlePaginationChange = (_pageInfo: PageInfo): void => {
    pageInfo.value = _pageInfo;
    search();
  };

  // 查询
  const search = async () => {
    try {
      const { data } = await doSearch();
      tableData.value = data.list;
      total.value = data.total;
    } catch (error) {}
  };
  // 请求接口
  const doSearch = async () => {
    // 查询参数
    const data = searchFormData.value;
    // 添加分页参数
    data.pageIndex = pageInfo.value.page;
    data.pageSize = pageInfo.value.pageSize;

    return api.page(data);
  };

  onMounted(() => {
    // 页面加载
    search();
  });

  return {
    actionButtons,
    dlgShow,
    dlgTitle,
    editFormColumns,
    editFormData,
    editFormRules,
    handleAdd,
    handlePaginationChange,
    handleSave,
    handleSearch,
    pageInfo,
    searchFormColumns,
    searchFormData,
    tableColumns,
    tableData,
    total
  };
}
